<template>
  <div class="info">
    <van-nav-bar title="内容" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="wrap">
      <van-tabs v-model="active" color="#1989fa" @change="outChange">
        <van-tab title="业务介绍">
          <div v-if="innerList.length">
            <van-tabs
              v-model="innerActive"
              color="#1989fa"
              type="card"
              style="margin-top: 20px"         
            >
              <van-tab :title="item.businessName" v-for="(item,index) in innerList" :key="index">
                <div class="list" v-for="(_item,index) in item.list" :key="index">
                  <div class="cell" @click="goDetails(_item)">
                    <span class="left">{{ _item.messageTitle}}</span>
                    <span class="right">{{ _item.createTime}}</span>
                  </div>
                </div>
              </van-tab>
            </van-tabs>
          </div>
        </van-tab>
        <van-tab title="时限查询">
          <div v-if="innerList.length">
            <van-tabs
              v-model="innerActive"
              color="#1989fa"
              type="card"
              style="margin-top: 20px"         
            >
              <van-tab :title="item.businessName" v-for="(item,index) in innerList" :key="index">
                <div class="list" v-for="(_item,index) in item.list" :key="index">
                  <div class="cell" @click="goDetails(_item)">
                    <span class="left">{{ _item.messageTitle}}</span>
                    <span class="right">{{ _item.createTime}}</span>
                  </div>
                </div>
              </van-tab>
            </van-tabs>
          </div>
        </van-tab>
        <van-tab title="违禁品查询">
          <div v-if="innerList.length">
            <van-tabs
              v-model="innerActive"
              color="#1989fa"
              type="card"
              style="margin-top: 20px"         
            >
              <van-tab :title="item.businessName" v-for="(item,index) in innerList" :key="index">
                <div class="list" v-for="(_item,index) in item.list" :key="index">
                  <div class="cell" @click="goDetails(_item)">
                    <span class="left">{{ _item.messageTitle}}</span>
                    <span class="right">{{ _item.createTime}}</span>
                  </div>
                </div>
              </van-tab>
            </van-tabs>
          </div>
        </van-tab>
        <van-tab title="海关政策">
          <div v-if="innerList.length">
            <van-tabs
              v-model="innerActive"
              color="#1989fa"
              type="card"
              style="margin-top: 20px"         
            >
              <van-tab :title="item.businessName" v-for="(item,index) in innerList" :key="index">
                <div class="list" v-for="(_item,index) in item.list" :key="index">
                  <div class="cell" @click="goDetails(_item)">
                    <span class="left">{{ _item.messageTitle}}</span>
                    <span class="right">{{ _item.createTime}}</span>
                  </div>
                </div>
              </van-tab>
            </van-tabs>
          </div>
        </van-tab>
        <van-tab title="常见问题">
         <div v-if="innerList.length">
            <van-tabs
              v-model="innerActive"
              color="#1989fa"
              type="card"
              style="margin-top: 20px"         
            >
              <van-tab :title="item.businessName" v-for="(item,index) in innerList" :key="index">
                <div class="list" v-for="(_item,index) in item.list" :key="index">
                  <div class="cell" @click="goDetails(_item)">
                    <span class="left">{{ _item.messageTitle}}</span>
                    <span class="right">{{ _item.createTime}}</span>
                  </div>
                </div>
              </van-tab>
            </van-tabs>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      innerActive: 0,
      innerList: []
    };
  },
  created() {
    this.init(1);
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    outChange(name) {
      this.innerList = [];
      this.active = name;
      this.innerActive = 0;
      this.init(name + 1);
    },
    goDetails(item) {
      this.$router.push({
        path: "/details",
        query: {
          info: item
        }
      });
    },
    async init(id) {
      let res = await this.$api.get("/rest/business/type/list", {
        contentId: id
      });
      if (res && res.code == 0) {
        this.innerList = res.rows;
      } else {
        this.$toast("无该商品信息！");
      }
    }
  }
};
</script>

<style>
.info {
  width: 100vw;
  background: #ffffff;
}
.wrap {
  padding: 0 40px;
}
.list {
  padding-top: 40px;
}
.list .cell {
  border-bottom: 1px solid #eeeeee;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 40px;
  font-size: 24px;
}
.van-tabs__wrap--scrollable .van-tab {
    -webkit-box-flex: 0;
    -webkit-flex: 0 0 25%!important;
    flex: 0 0 25%!important;
    flex-basis: 25%!important;
}
</style>
